<template>
  <div>
    <wx-tables
      :columns="columns"
      title="请假管理"
      :data-source="dataSource"
      :loading="loading"
      :total="total"
      :page.sync="page"
    >
      <template #search>
        <!--        <tip-block tip="搜索" />-->
        <el-form label-position="left" style="margin-top: 10px;display: flex;flex-wrap:wrap;justify-content: space-between">
          <el-form-item style="display: flex;" label="学生姓名" prop="search_code">
            <el-input v-model="searchForm.search_words" clearable placeholder="请输入" />
          </el-form-item>
          <el-form-item style="display: flex;" label="请假单状态" prop="search_code">
            <el-select v-model="searchForm.leave_status_str" clearable placeholder="请选择">
              <el-option
                v-for="(item, type) of LEAVE_STATUS_LIST"
                :key="type"
                :label="item.title"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item style="display: flex;" label="所在学部" prop="search_code">
            <el-select v-model="searchForm.year_department_id" clearable placeholder="请选择学部">
              <el-option
                v-for="item in select_dept"
                :key="item.type"
                :label="item.label"
                :value="item.type"
              />
            </el-select>
          </el-form-item>
          <el-form-item style="display: flex;" label="所在年级" prop="search_code">
            <el-select v-model="searchForm.search_grade_name" clearable placeholder="请选择年级">
              <el-option
                v-for="item of 20"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item style="display: flex;" label="所在班级" prop="search_code">
            <el-select v-model="searchForm.search_class_name" clearable placeholder="请选择班级">
              <el-option
                v-for="item of 20"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <div>
            <el-button type="primary" class="table-btn" icon="el-icon-search" @click="handleSearchClick">筛选</el-button>
            <el-button class="table-btn" icon="el-icon-refresh" @click="handleRectSearch">重置</el-button>
          </div>
        </el-form>
      </template>
      <!-- tools -->
      <template v-slot:leave_reason="record">
        {{ DISEASE[ record.row.leave_reason] || '无' }}
      </template>
      <template v-slot:userName="record">
        {{ record.row.userName || record.row.user.phonenum }}
      </template>
      <template v-slot:leave_status="record">
        {{ LEAVE_STATUS[record.row&&record.row.leave_status] }}
      </template>
      <template #tools>
        <!--        <el-button type="primary" class="table-btn" icon="el-icon-plus" @click="handleOpenMyForm()">新增</el-button>-->
        <!--        <el-button class="table-btn" icon="el-icon-refresh-right" @click="handleGetTable">刷新</el-button>-->
      </template>
      <!-- table slots -->
      <template v-slot:oper="record">
        <div class="oper-box">
          <span><el-link type="primary" @click="handleOpenFormByRow(record.row)">查看</el-link></span>
        </div>
      </template>
    </wx-tables>

    <wx-full title="查看" :visible.sync="formVisible">
      <template v-slot:tools>
        <!--        <el-link v-if="isAdd" type="primary" :disabled="formBtnDisabled" @click="handleSaveDraft">保存草稿</el-link>-->
        <!--        <el-link v-else type="primary" :disabled="formBtnDisabled" @click="handleSaveMyForm">保存</el-link>-->
      </template>
      <student-detail ref="myForm" :loading="formLoading" :is-add="isAdd" :form-info="studentFormInfo" @close="close" />
    </wx-full>
  </div>
</template>

<script>
// const TITLE = '老师管理'
import WxFull from '@/components/WxFull'
import WxTables from '@/components/WxTables'
import FullMixins from '@/components/WxTables/fullMixins'
import TableMixins from '@/components/WxTables/mixins'
// import TipBlock from '@/components/TipBlock'
import StudentDetail from './Form'
import { DISEASE, LEAVE_STATUS, LEAVE_STATUS_LIST, TESLIST } from '@/views/constants'
// const DEFULTWIDTH = { 'min-width': 150 }
export default {
  name: 'Leavet',
  components: {
    WxTables,
    WxFull,
    StudentDetail
  },
  mixins: [TableMixins, FullMixins],
  data() {
    return {
      LEAVE_STATUS,
      DISEASE,
      LEAVE_STATUS_LIST,
      TESLIST,
      studentFormInfo: {},
      changeRole: false,
      formVisible: false,
      columns: [
        { config: { type: 'index', width: 100 }, label: '序号' },
        { dataIndex: 'studentName', label: '学生姓名' },
        { dataIndex: 'userName', label: '发起者',slots: true },
        { dataIndex: 'temperature', label: '体温(°)' },
        { dataIndex: 'leave_reason', label: '请假原因', slots: true },
        { dataIndex: 'created_at', label: '创建时间' },
        { dataIndex: 'leave_status', label: '状态', slots: true },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      markId: 'id',
      // 查询表格API
      api: 'api/adminPortal/askForLeave/getListByCon?level=student,class,grade,department,user,disease,parent',
      // 根据ID markId 查询
      // findApi: '/systemAdmin/getById',
      // 接口前缀 修改
      // baseApi: '/systemManagement/',
      select_grade: [],
      select_dept: []
    }
  },
  watch: {
    dataSource() {
      this.dataSource.forEach((item) => {
        item.studentName = item.student.name
        item.userName = item.user.real_name
        item.calssName = item.class.name
        item.gradeName = item.grade.name
        item.departmentName = item.department.name
      })
    }
  },
  mounted() {
    this.handleGetYearDepartment()
  },
  methods: {
    handleOpenFormByRow(data) {
      this.studentFormInfo = data
      this.formVisible = true
    },
    close() {
      console.log(11)
      this.formVisible = false
    }
  }
}
</script>
